<template></template>
      
<script setup>
import { inject, onMounted } from 'vue';
import axios from 'axios'
import { LineLayer, LayerSwitch, PolygonLayer, Popup, LayerPopup,PointLayer } from '@antv/l7'

  
onMounted(async () => {
  


  const { scene,map } = inject("$scene_map");
      var park_res = await axios("http://localhost:8080/park")

      var park_layer = new PolygonLayer({
            name: "石家庄公园",
            zIndex: 0,
      });
      park_layer.source(park_res.data)
            .color(
                  '#00ffaa'
            )
            .shape('fill')
            .active(true);
      scene.addLayer(park_layer);

      var road_res = await axios("http://localhost:8080/road")

      var road_layer = new LineLayer({
            name: "三环内道路",
            zIndex: 0,
      }).source(road_res.data)
            // 设置道路宽度
            .size(1)
            .shape('line')
            // 设置颜色
            .color('#1990FF')
            //设置道路流线的效果
            .animate({
                  interval: 1, // 间隔
                  duration: 2, // 持续时间，延时
                  trailLength: 2 // 流线长度
            });

      scene.addLayer(road_layer);


      scene.addImage('hos','/src/assets/定点医院.png')
      
      var hospital_res = await axios("http://localhost:8080/hospital")

      var hospital_layer = new PointLayer({
            name: "石家庄医院",
            zIndex: 0,
      }).source(hospital_res.data)
            // 设置道路宽度
            .size(10)
            .shape( 'hos').color('#f00');

      scene.addLayer(hospital_layer);
      const hosPopup = new LayerPopup({
    items: [
      {
        layer: hospital_layer,
        fields: [
          {
            field: 'name',
            formatField:['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(hosPopup);


  scene.addImage('train','/src/assets/火车站.png')
  scene.addImage('bus','/src/assets/长途车站.png')
      var station_res = await axios("http://localhost:8080/station")

      var station_layer = new PointLayer({
            name: "石家庄车站",
            zIndex: 0,
      }).source(station_res.data)
            // 设置道路宽度
            .size(10)
            .shape('name', [ 'train', 'bus' ]).color('#ccc');

      scene.addLayer(station_layer);
      const stationPopup = new LayerPopup({
    items: [
      {
        layer: station_layer,
        fields: [
          {
            field: 'name',
            formatField:['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(stationPopup);

  scene.addImage('policy','/src/assets/警徽.png')
      var policy_res = await axios("http://localhost:8080/policy")

      var policy_layer = new PointLayer({
            name: "石家庄车站",
            zIndex: 0,
      }).source(policy_res.data)
            // 设置道路宽度
            .size(10)
            .shape().color('#eeccaa');

      scene.addLayer(policy_layer);
      const policyPopup = new LayerPopup({
    items: [
      {
        layer: station_layer,
        fields: [
          {
            field: 'name',
            formatField:['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(policyPopup);

  const a = new LayerSwitch({
            title: "图层目录树",
            btnText: "切换图层",
            layers: [park_layer, hospital_layer,station_layer,policy_layer,road_layer],
            position:'leftcenter',
            style:'margin-bottom:740px;height:40px;z-index:20;',
            popperPlacement:'bottom-start'
      });
      scene.addControl(a);

})
</script>
      
<style></style>